<template>
  <div id="app">
    <div :class="['sidebar', { collapsed: isCollapsed }]" v-if="!isLoginOrRegister">
      <button class="toggle-btn" @click="toggleSidebar"><p v-if="!isCollapsed">&lt;</p></button>
      <nav v-if="!isCollapsed">
        <router-link to="/">Home</router-link>
        <router-link to="/projects">My Projects</router-link>
        <router-link to="/flow">Flow Editor</router-link>
        <router-link to="/chat">Chat</router-link>
        <router-link to="/team">Team</router-link>
        <router-link to="/profile">Profile</router-link>
        <!-- <router-link to="/login">Login</router-link>
        <router-link to="/register">Register</router-link> -->
      </nav>

      <!-- <div class="theme-toggle">
        <button @click="toggleTheme">
          {{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
        </button>
      </div> -->
    </div>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
export default {
};
</script>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { computed, ref } from 'vue';
import { onMounted } from 'vue';

let isCollapsed= ref(false);
const route = useRoute(); 


function toggleSidebar() {
  isCollapsed.value = !isCollapsed.value;
}
const isLoginOrRegister = computed(() => {
  return route.path === '/login' || route.path === '/register';
});


const isDarkMode = ref(localStorage.getItem('theme') === 'dark');

onMounted(() => {
  console.log('isDarkMode', isDarkMode.value);
  if (isDarkMode.value) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
});
const toggleTheme = () => {
  console.log('toggleTheme')
  isDarkMode.value = !isDarkMode.value;
  const newTheme = isDarkMode.value ? 'dark' : 'light';
  
  // 保存主题设置到 localStorage
  localStorage.setItem('theme', newTheme);

  // 根据主题设置修改根元素的类
  if (isDarkMode.value) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
};

</script>

<style>

/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';

/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';

.sidebar {
  width: 25%;
  max-width: 250px;
  background-color: #333;
  color: white;
  padding: 20px;
  transition: width 0.3s;
  position: relative;
}

.sidebar.collapsed {
  width: 0;
  padding: 0px;
}
.toggle-btn {
  position: absolute;
  max-width: 40px;
  top: 50%;
  left: 100%;
  width: 15%;
  height: 15%;
  transform: translate(-50%, -50%);
  background-color: #007bff;
  color: white;
  border: none;
  padding: 3px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 10px;
}

.toggle-btn:hover {
  background-color: #0056b3;
  min-width: 30px;
}

nav {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

nav a {
  display: block;
  margin: 10px 0;
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
  border-radius: 5px;
}

nav a:hover {
  background-color: #555;
}

.theme-toggle button {
  padding: 8px 12px;
  background-color: var(--color-border);
  border: none;
  border-radius: 12px;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.3s;
}

.theme-toggle button:hover {
  background-color: var(--color-border-hover);
}
.main-content {
  width: 75%;
  height: 100%;
  flex-grow: 1;
}
</style>
